<template>
  <div class="bindCode" :style="{ '--color': `${background_color}` }">
    <!-- <c-title :hide="false" :text="headTitle"></c-title> -->
    <!-- 生产线获取4g模块 -->
    <div class="bgBox" v-if="dev">
      <div class="txt">设备类型：{{ info.machine_type_name }}</div>
      <div class="img">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_scan%402x.png" alt="" />
      </div>
      <div class="btn" @click="qrcode" v-if="!devStatus">扫描二维码</div>
      <div class="btn" v-if="devStatus" @click="noDevBack">已绑定</div>
    </div>
    <!-- 配件 -->
    <div class="bgBox" v-else-if="pjstatus">
      <div class="txt">配件：{{ this.$route.query.noTitle }}</div>
      <div class="img">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2Ficon_scan%402x.png" alt="" />
      </div>
      <div class="btn" @click="qrcode">扫描二维码</div>
    </div>
    <!-- 用户扫二维码绑定设备 -->
    <div class="bgBox noDev" v-else style="background: #f7f7f7;">
      <div class="equipment">
        <div class="equipment_txt">设备类型：{{ info.machine_type_name }}</div>
        <div class="equipment_txt">设备编码：{{ info.local_code }}</div>
      </div>
      <div class="orderBox" v-if="!order_goods_id">
        <span>请选择订单</span>
        <div class="selectBtn" @click="selectShowTap">选择</div>
      </div>
      <div v-if="order_goods_id">
        <div class="lis" v-for="(item, index) in checkArr" :key="index">
          <div class="lis_top">
            <div class="sn">订单编号：{{ item.order_sn }}</div>
            <div class="lis_top_r">ID:{{ item.order_id }}</div>
          </div>
          <div class="lis_b" v-if="item.has_one_goods">
            <img :src="item.has_one_goods.thumb" alt="" />
            <div class="lis_b_c">
              <div class="lis_b_c_title">{{ item.has_one_goods.title }}</div>
              <div class="lis_b_c_status">{{ item.has_one_goods.status_name }}</div>
              <div class="lis_b_c_option" v-if="item.type == 1">到期时间：{{ item.end_time }}</div>
              <div class="lis_b_c_option" v-if="item.type == 2">剩余天数：{{ item.day }}</div>
            </div>
            <div class="lis_b_btn">
              <div class="sbtn" @click="selectShowTap">更换</div>
            </div>
          </div>
        </div>
      </div>
      <div class="txt" style="margin-bottom: 1.19rem;">是否绑定该设备？</div>
      <div class="btn" @click="bindCode">确认</div>
      <div class="btn cancel" @click="noDevBack">取消</div>
    </div>

    <van-dialog v-model="show" title="是否绑定当前设备？" @confirm="bindCode" @cancel="false" show-cancel-button>
      <div class="dt">滤芯编码：{{ showInfo.scanCode }}</div>
      <div class="da">当前设备：{{ showInfo.machine_type_name }}</div>
      <div class="da">设备名称：{{ showInfo.name }}</div>
    </van-dialog>
    <van-popup v-model="selectShow" closeable round :style="{ width: '85%', height: '60%', background: '#f6f6f6' }">
      <div class="orderPopup">
        <div class="ctitle">订单列表</div>
        <div class="list">
          <div class="lis" v-for="(item, index) in orderList" :key="index">
            <div class="lis_top">
              <div class="sn">订单编号：{{ item.order_sn }}</div>
              <div class="lis_top_r">ID:{{ item.order_id }}</div>
            </div>
            <div class="lis_b" v-if="item.has_one_goods">
              <img :src="item.has_one_goods.thumb" alt="" />
              <div class="lis_b_c">
                <div class="lis_b_c_title">{{ item.has_one_goods.title }}</div>
                <div class="lis_b_c_status">{{ item.has_one_goods.status_name }}</div>
                <div class="lis_b_c_option" v-if="item.type == 1">到期时间：{{ item.end_time }}</div>
                <div class="lis_b_c_option" v-if="item.type == 2">剩余天数：{{ item.day }}</div>
              </div>
              <div class="lis_b_btn">
                <div class="sbtn" @click="chooseGood(item.order_goods_id)">选择</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dev: false,
      background_color: "#ffc11e",
      pjstatus: false,
      info: [],
      headTitle: "绑定4G编码",
      show: false,
      showInfo: [],
      devStatus: false,
      selectShow: false,
      orderList: [],
      order_goods_id: ""
    };
  },
  activated() {
    if (this.$route.params.pj) {
      this.pjstatus = true;
      this.headTitle = "绑定配件";
    } else {
      if (this.$route.params.dev) {
        this.dev = true;
      }
      this.getData();
    }

    try {
      this.background_color = JSON.parse(localStorage.getItem("yz_basic_info")).theme_color;
    } catch (error) {}
  },
  computed: {
    checkArr() {
      let arr = this.orderList.filter(item => {
        return item.order_goods_id == this.order_goods_id;
      });
      return arr;
    }
  },
  methods: {
    partBindPage(scanCode) {
      $http
        .post(
          "plugin.drink-machine.frontend.part.bindPage",
          {
            machine_id: this.$route.query.machine_id
          },
          "加载中..."
        )
        .then(res => {
          if (res.result == 1) {
            this.show = true;
            this.showInfo = res.data;
            this.showInfo.scanCode = scanCode;
          }
        });
    },
    qrcode() {
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: res => {
          if (this.pjstatus) {
            this.partBindPage(res.resultStr);
          } else {
            this.bindCode(res.resultStr);
          }
        },
        fail: err => {
          console.log(err);
        }
      });
    },
    bindCode(scanCode) {
      let urlstr, json;
      if (this.dev) {
        // 生产获取4g模块
        urlstr = "plugin.drink-machine.frontend.factory.bind";
        json = {
          local_code: this.$route.query.local_code,
          id: this.$route.query.id,
          created_at: this.$route.query.created_at,
          code: scanCode
        };
      } else {
        if (this.pjstatus) {
          // 绑定配件
          (urlstr = ""), (json = {}), (urlstr = "plugin.drink-machine.frontend.part.bind");
          json = {
            machine_id: this.$route.query.machine_id,
            part_no: this.$route.query.part_no,
            code: this.showInfo.scanCode
          };
        } else {
          // 用户扫二维码绑定设备
          urlstr = "plugin.drink-machine.frontend.machine.bind";
          if (!this.order_goods_id) {
            this.$toast("请选择订单");
            return;
          }
          json = {
            local_code: this.$route.query.local_code,
            id: this.$route.query.id,
            created_at: this.$route.query.created_at,
            order_goods_id: this.order_goods_id
          };
        }
      }

      $http.get(urlstr, json, "加载中...").then(res => {
        if (res.result == 1) {
          if (this.dev) {
            this.$toast(res.msg);
            if (res.data.bind_status) {
              this.devStatus = true;
            }
          } else {
            // 绑定配件 返回上一页
            if (this.pjstatus) {
              this.$dialog
                .alert({
                  message: res.msg
                })
                .then(() => {
                  this.$router.go(-1);
                });
              return;
            }
            this.$router.replace(this.fun.getUrl("drinkMachindIndex", {}, {}));
          }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    noDevBack() {
      this.$router.push(this.fun.getUrl("member", {}, {}));
    },
    chooseGood(id) {
      this.order_goods_id = id;
      this.selectShow = false;
    },
    getNext() {
      let urlstr = "plugin.drink-machine.frontend.machine.bindOrderList";
      $http.post(urlstr, {machine_id:this.info.id}, "加载中...").then(res => {
        if (res.result == 1) {
          console.log(res);
          this.orderList = res.data;
          this.selectShow = true;
        } else {
          this.$dialog
            .alert({
              message: res.msg
            })
            .then(() => {
              this.$router.push(this.fun.getUrl("member", {}, {}));
            });
        }
      });
    },
    selectShowTap() {
      this.getNext();
    },
    getData() {
      let urlstr, json;
      if (this.dev) {
        urlstr = "plugin.drink-machine.frontend.factory.bindPage";
        json = {
          local_code: this.$route.query.local_code,
          id: this.$route.query.id,
          created_at: this.$route.query.created_at
        };
      } else {
        urlstr = "plugin.drink-machine.frontend.machine.bindPage";
        json = {
          local_code: this.$route.query.local_code,
          id: this.$route.query.id,
          created_at: this.$route.query.created_at
        };
      }

      $http.post(urlstr, json, "加载中...").then(res => {
        if (res.result == 1) {
          this.info = res.data;
          console.log(res.data);
          if (res.data.bind_status == 1 && this.dev) {
            this.devStatus = true;
            return;
          }
        } else {
          this.$dialog
            .alert({
              message: res.msg
            })
            .then(() => {
              this.$router.push(this.fun.getUrl("member", {}, {}));
            });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.orderBox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 1rem;

  .selectBtn {
    border: 1px solid var(--color);
    color: var(--color);
    border-radius: 1rem;
    padding: 0.15rem 0.75rem;
  }
}

.orderPopup {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 1rem;

  .ctitle {
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.85rem;
    box-sizing: border-box;
  }

  .list {
    flex: 1;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0 0.55rem;
    box-sizing: border-box;
    overflow-y: scroll;
  }
}

.lis {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 0.3125rem;

  .lis_b {
    width: 100%;
    display: flex;
    justify-content: space-between;

    img {
      width: 4rem;
      height: 3.5rem;
      margin: 0;
      margin-right: 0.75rem;
      border-radius: 0.325rem;
    }

    .lis_b_c {
      flex: 1;
      // height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.65rem;
      overflow: hidden;

      .lis_b_c_title,
      .lis_b_c_option,
      .lis_b_c_status {
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .lis_b_btn {
      display: flex;
      align-items: center;
      margin-left: 0.5rem;

      .sbtn {
        border: 1px solid var(--color);
        color: var(--color);
        border-radius: 1rem;
        padding: 0.15rem 0.5rem;
      }
    }
  }

  .lis_top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    margin-bottom: 1rem;

    .sn {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }

    .lis_top_r {
      flex-shrink: 0;
      margin-left: 0.5rem;
    }
  }
}

.bgBox {
  // padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: #fff;
  padding: 1.8rem 0.75rem;
  box-sizing: border-box;
}

.noDev {
  padding-top: 0;
  overflow: hidden;
}

.img {
  margin-top: 1.9rem;
  margin-bottom: 2rem;

  img {
    width: 5rem;
    height: 5rem;
  }
}

.btn {
  width: 12.5rem;
  height: 2.5rem;
  background: var(--color);
  border-radius: 1.25rem;
  font-weight: 500;
  color: #fff;
  font-size: 1rem;
  line-height: 2.5rem;
  margin: 0 auto;
}

.cancel {
  background: #fff;
  border: 0.03rem solid var(--color);
  margin-top: 1.19rem;
  color: var(--color);
}

.equipment {
  margin: 0.75rem 0.75rem 2.34rem 0.75rem;
  border-radius: 0.63rem;
  background: #f7f7f7;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .equipment_txt {
    color: #00001c;
    font-weight: 400;
    font-size: 0.94rem;
  }
}

.dt {
  font-weight: 500;
  font-size: 0.81rem;
  margin-bottom: 0.66rem;
  margin-top: 0.81rem;
}

.da {
  color: #6e6e79;
  font-size: 0.75rem;
}
</style>
